<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"><html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Example: OS-Style Programs Menu (YUI Library)</title>

                <!-- Standard reset and fonts -->

        <link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
        <link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">

            

        <link rel="stylesheet" type="text/css" href="../../build/container/assets/container.css">

         

        <!-- CSS for Menu -->

        <link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
 

        <!-- Page-specific styles -->

        <style type="text/css">

            html {
            
                overflow:hidden;
            
            }

            h1 { font-weight:bold; }

            body {
            
                background-color:#dfb8df;
                overflow:hidden;
            
            }

            /* Define a style for the H1 "toolbar" */

            .ytoolbar {

                border-top-width:2px;
                border-top-color:#ddd;
                border-top-style:solid;
                background-color:#ccc;
                position:absolute;
                width:100%;
            
            }


            /* Style the "Yahoo!" anchor to look like a button */

            .ytoolbar #yahoo {
            
                border-width:2px;
                border-color:#ddd #666 #666 #ddd;
                border-style:solid;
                float:left;
                *float:none;
                *display:inline-block;
                padding:4px 12px 4px 28px;
                margin:4px;
                background-color:#ccc;
                color:#000;
                text-decoration:none;
                background:url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/b/purpley.1.0.gif) 10% 50% no-repeat;
            
            }

            .ytoolbar #yahoo:active {

                border-color:#666 #ddd #ddd #666;
            
            }


            /* Define a new style for each menu */

            div.yuimenu {

                border-width:2px;
                border-color:#ddd #666 #666 #ddd;
                border-style:solid;
                background-color:#ccc;                
            
            }


            /* Define a new style for each menu item */

            div.yuimenu li.yuimenuitem {

                padding-top:4px;
                padding-bottom:4px;
                background-image:url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/b/purpley.1.0.gif);
                background-position:4px;
                background-repeat:no-repeat;

            }

            div.yuimenu li.yuimenuitem img {
            
                *border-color:#ccc;
            
            }


            /* Add icons to menu items */

            div.yuimenu li.hassubmenu {
            
                background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/fldr16_1.gif);
            
            }

            div.yuimenu li#help {

                background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/hlp16_1.gif);
            
            }

            div.yuimenu li#search {

                background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/srch16_1.gif);
            
            }

            div.yuimenu li#goto {

                background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/arorght16_1.gif);

            }

            div.yuimenu li#examples {

                background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/lnk16_1.gif);

            }


            /* Define a new style for an item's "selected" state */

            div.yuimenu li.selected {
            
                background-color:#039;
            
            }

            div.yuimenu li.selected a.selected {
                
                text-decoration:none;
                
            }

            div.yuimenu li.yuimenuitem.selected img.selected {
            
                *border-color:#039;
            
            }

        </style>

                <!-- Namespace source file -->

        <script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>

        <!-- Dependency source files -->

        <script type="text/javascript" src="../../build/event/event.js"></script>
        <script type="text/javascript" src="../../build/dom/dom.js"></script>

            
        <script type="text/javascript" src="../../build/dragdrop/dragdrop.js"></script>
        <script type="text/javascript" src="../../build/animation/animation.js"></script>
        
        <!-- Container source file -->
        <script type="text/javascript" src="../../build/container/container.js"></script>

        <!-- Menu source file -->
        <script type="text/javascript" src="../../build/menu/menu.js"></script>

        <!-- Page-specific script -->

        <script type="text/javascript">
        
            YAHOO.example.onMenuReady = function() {

                // "click" handler for the "Go to..." menu item
    
                function onGotoClick() {
                
                    var sURL = window.prompt("Enter a URL:","");
    
                    if(sURL && sURL.length > 0) {
                        
                        document.location = sURL;
    
                    }
                
                }


                var oH1 = document.getElementsByTagName("h1")[0];


                /*
                    Apply the "ytoolbar" class to the H1 so that it is styled 
                    like an application toolbar
                */

                YAHOO.util.Dom.addClass(oH1, "ytoolbar");


                function PositionToolbar() {

                    // Position the H1 "toolbar" to the bottom of the viewport
    
                    var nViewportHeight = YAHOO.util.Dom.getClientHeight(),
                        nToolbarHeight = oH1.offsetHeight;
                    
                    oH1.style.top = (nViewportHeight - nToolbarHeight) + "px";                

                }

                PositionToolbar();


                // Instantiate the root menu and submenus

                var oMenu = new YAHOO.widget.Menu(
                                    "yproducts", 
                                    { constraintoviewport:true, zIndex:2 } 
                                );


                oMenu.addItems([

                    { text: "Examples", url: "index.html", id: "examples" },
                    { text:"Go to...", id: "goto", onclick: { fn: onGotoClick } }

                ]);


                // Render the root menu and submenus

                oMenu.render();


                /*
                    Position the bottom-left corner of the root menu to the 
                    top-left corner of the "Yahoo!" anchor
                */

                oMenu.cfg.setProperty("context", ["yahoo", "bl", "tl"]);


                // "click" event handler for "Yahoo!" button
    
                function onYahooClick(p_oEvent) {
    
                    // Position and display the menu
    
                    oMenu.align("bl", "tl");
                    
                    oMenu.show();
                    
    
                    // Stop propagation and prevent the default "click" behavior
    
                    YAHOO.util.Event.stopEvent(p_oEvent);
                    
                }


                /*
                    Assign a "click" event handler to the "Yahoo!" anchor that 
                    will display the menu
                */
                
                YAHOO.util.Event.addListener("yahoo", "click", onYahooClick);


                // "resize" handler for the window
    
                function onWindowResize() {
    
                    PositionToolbar();
    
                    oMenu.align("bl", "tl");
                
                }


                /*
                    Add a "resize" event handler for the window that will 
                    reposition the H1 "toolbar" to the bottom of the viewport
                */

                YAHOO.util.Event.addListener(window, "resize", onWindowResize);


                var oPanel = new YAHOO.widget.SimpleDialog(
                                    "exampleinfo", 
                                    { 
                                        constraintoviewport: true,
                                        fixedcenter:true,
                                        width:"400px",
                                        zIndex:1
                                    }
                                );
                
                
                oPanel.setHeader("OS-Style Programs Menu Example");
                oPanel.setBody("This example demonstrates how to transform existing markup on the page into an operating-system-like menu.");

                oPanel.render(document.body);
              
                oPanel.show();
                
            };


            // Initialize and render the menu when it is available in the DOM

            YAHOO.util.Event.onContentReady("yproducts", YAHOO.example.onMenuReady);

        </script>

    </head>
    <body>
        
        <h1><a id="yahoo" href="http://www.yahoo.com">Yahoo!</a></h1>

        <div id="yproducts">
            <div class="bd">
                <ul>
                    <li>Products
                        <div id="products">
                            <div class="bd">
                                <ul>
                                	<li><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
                                	<li><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
                                	<li><a href="http://calendar.yahoo.com">Yahoo! Calender</a></li>
                                	<li><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
                                	<li><a href="http://messenger.yahoo.com">Yahoo! Messenger</a></li>
                                	<li><a href="http://360.yahoo.com">Yahoo! 360</a></li>
                                	<li><a href="http://photos.yahoo.com">Yahoo! Photos</a></li>
                                    <li><a href="http://finance.yahoo.com/">Finance</a></li>
                                    <li><a href="http://entertainment.yahoo.com/">Entertainment</a>
                                        <div id="entertainmentproducts">
                                            <div class="bd">
                                                <ul>
                                                	<li><a href="http://music.yahoo.com/">Yahoo! Music</a></li>
                                                	<li><a href="http://movies.yahoo.com/">Yahoo! Movies</a></li>
                                                	<li><a href="http://tv.yahoo.com/">Yahoo! TV</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li id="search"><a href="http://search.yahoo.com/">Search</a>
                        <div id="searchproducts">
                            <div class="bd">
                                <ul>
                                	<li><a href="http://images.search.yahoo.com/images">Yahoo! Image Search</a></li>
                                	<li><a href="http://dir.yahoo.com/">Yahoo! Directory</a></li>
                                	<li><a href="http://local.yahoo.com">Yahoo! Local</a></li>
                                	<li><a href="http://news.search.yahoo.com/news">Yahoo! News Search</a></li>
                                	<li><a href="http://search.yahoo.com/people">Yahoo! People Search</a></li>
                                	<li><a href="http://search.yahoo.com/products">Yahoo! Product Search</a></li>
                                </ul>
                            </div>
                        </div>                    
                    </li>
                    <li id="help"><a href="http://help.yahoo.com/">Help</a></li>
                </ul>
            </div>
        </div>
        
    </body>
</html>